<template>
  <view class="group-notice" v-if="groupInfo">
    <!-- 编辑人资料 -->
    <view class="eidt-info flex" v-if="groupInfo.custom.lastUpdateData">
      <image class="avatar" :src="groupInfo.custom.lastUpdateData.avatar"></image>
      <view class="info flex flex-dir-c flex-jc-c">
        <text class="nickname">{{groupInfo.custom.lastUpdateData.nick}}</text>
        <text class="time">{{groupInfo.custom.lastUpdateData.desc}}</text>
      </view>
    </view>
    
    <!-- 公告内容 -->
    <view class="notice-content">
      <view class="content">
        <text v-if="!editNotice">{{notice}}</text>
        <u-input v-else v-model="notice" :custom-style="customStyle" type="textarea" :focus="editNotice" :clearable="false" :height="height" :auto-height="true" />
      </view>
      <view class="edit-btn-box flex flex-jc-fe" v-if="groupInfo.groupProfile.selfInfo.role === 'Owner' || groupInfo.groupProfile.selfInfo.role == 'Admin'">
        <view class="btn flex flex-ai-c flex-jc-c" @click="onEditNotice"><text>{{editNotice ? '完成' : '编辑'}}</text></view>
      </view>
      <view class="divider flex flex-ai-c flex-jc-c">
        <view class="line"></view>
        <text class="text">仅群主可编辑</text>
        <view class="line"></view>
      </view>
    </view>
  </view>
</template>

<script>
import timLogin from '@/utils/timLogin.js' // 导入tim 登录
import common from '@/utils/commen/commen.js'
export default{
  data() {
    return {
      notice: '',
      height: 200,
      customStyle: {
        backgroundColor: '#f6f6f6',
        padding: '10rpx 20rpx',
        marginBottom: '30rpx',
        borderRadius: '10rpx',
        fontSize: '28rpx'
      },
      editNotice: false,
      groupId: '',
      groupInfo: null,
    }
  },
  onLoad(option) {
    this.groupId = option.id || ''
    uni.showLoading({
      title: '加载中'
    })
    // 登录tim
    if(this.$store.state.isSDKReady) {
      this.getGroupInfo()
    } else {
      timLogin(() => {
        this.getGroupInfo()
      })
    }
  },
  methods: {
    isJSON(str) {
      if (typeof str === 'string') {
        try {
          let obj = JSON.parse(str)
          return obj
        } catch(e) {
          return false
        }
      }
    },
    // 获取群信息
    getGroupInfo(){
      this.tim.getConversationProfile(`GROUP${this.groupId}`).then(imResponse => {
        let conversion = imResponse.data.conversation
        conversion.custom = {}
        for(let i in conversion.groupProfile.groupCustomField){
          let key = conversion.groupProfile.groupCustomField[i].key
          let value = conversion.groupProfile.groupCustomField[i].value
          if(key === 'lastUpdateData'){
            value = this.isJSON(value)
          }
          conversion.custom[key] = value
          // console.log(conversion)
        }
        this.groupInfo = conversion
        this.notice = conversion.groupProfile.notification
        uni.hideLoading()
      }).catch(imError => {
        uni.hideLoading()
      });
    },
    // 修改群公告
    onEditNotice() {
      if(!this.editNotice) {
        this.editNotice = !this.editNotice
        return false
      }
      let timUserInfo = this.$store.state.timUserInfo
      uni.showLoading({
        title: '加载中'
      })
      this.tim.updateGroupProfile({
        groupID: this.groupId,
        notification: this.notice,
        groupCustomField: [
          {
            key: 'lastUpdateData',
            value: JSON.stringify({
              id: timUserInfo.userId,
              avatar: timUserInfo.img,
              nick: timUserInfo.user,
              desc: common.dateTimeFliter(new Date()) + ' 修改'
            })
          }
        ]
      }).then(imResponse => {
        uni.hideLoading()
        this.editNotice = !this.editNotice
        uni.showToast({
          icon: 'none',
          title: '修改成功'
        })
      }).catch(imError => {
        console.log(imError)
        uni.hideLoading()
        uni.showToast({
          icon: 'none',
          title: '修改失败'
        })
      })
    }
  }
}
</script>

<style lang="scss">
page{
  background-color: #f6f6f6;
}
.group-notice{
  overflow: hidden;
  .eidt-info{
    margin-top: 10rpx;
    padding: 16rpx 30rpx;
    background-color: #fff;
    .avatar{
      width: 96rpx;
      height: 96rpx;
      border-radius: 96rpx;
    }
    .info{
      flex: 1;
      margin-left: 26rpx;
      .nickname{
        font-size: 30rpx;
        color: #333;
      }
      .time{
        font-size: 26rpx;
        color: #999;
      }
    }
  }
  .notice-content{
    background-color: #fff;
    padding: 30rpx;
    margin-top: 24rpx;
    .content{
      font-size: 32rpx;
      color: #333;
      line-height: 60rpx;
      .input{
        line-height: 60rpx;
        background-color: #f6f6f6;
      }
    }
    .divider{
      padding: 50rpx 0 20rpx;
      .line{
        height: 2rpx;
        background-color: #999;
        width: 60rpx;
      }
      .text{
        font-size: 24rpx;
        color: #999;
        margin: 0 30rpx;
      }
    }
    .edit-btn-box{
      margin-bottom: -30rpx;
      .btn{
        width: 140rpx;
        height: 54rpx;
        background: linear-gradient(0deg, #FBD220, #FFE23E);
        border-radius: 27rpx;
        font-size: 26rpx;
        color: #333;
      }
    }
  }
}
</style>
